/* ========================================= */
/* HERO SECTION */
/* ========================================= */

.project-hero-section {
  width: 100%;

  height: 620px;

  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      rgba(0,0,0,0.45),
      rgba(0,0,0,0.45)
    ),
    url("/files/Images/projectdescrtipbanner.png");

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;
}

/* ========================================= */
/* OVERLAY */
/* ========================================= */

.project-hero-overlay {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;

  position: relative;
}

/* subtle fade */

.project-hero-overlay::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.05)
    );

  pointer-events: none;
}

/* ========================================= */
/* CONTENT */
/* ========================================= */

.project-hero-content {
  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 40px;

  position: relative;

  z-index: 2;

  animation:
    heroFadeUp 1s ease;
}

/* ========================================= */
/* TITLE */
/* ========================================= */

.project-hero-content h1 {
  font-size: 72px;

  line-height: 1.05;

  font-weight: 800;

  color: #ffffff;

  margin: 0;

  letter-spacing: -1.5px;

  max-width: 700px;

  text-shadow:
    0 4px 20px rgba(0,0,0,0.25);
}

/* ========================================= */
/* RED LINE */
/* ========================================= */

.project-hero-line {
  display: block;

  width: 60px;
  height: 5px;

  background: #e30613;

  border-radius: 100px;

  margin-top: 22px;

  animation:
    lineGrow 1.2s ease;
}

/* ========================================= */
/* ANIMATIONS */
/* ========================================= */

@keyframes heroFadeUp {

  from {
    opacity: 0;

    transform:
      translateY(40px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}

@keyframes lineGrow {

  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: 60px;
    opacity: 1;
  }

}

/* ========================================= */
/* LARGE TABLET */
/* ========================================= */

@media (max-width: 1200px) {

  .project-hero-section {
    height: 560px;
  }

  .project-hero-content h1 {
    font-size: 60px;
  }

}

/* ========================================= */
/* TABLET */
/* ========================================= */

@media (max-width: 992px) {

  .project-hero-section {
    height: 500px;
  }

  .project-hero-content {
    padding: 0 32px;
  }

  .project-hero-content h1 {
    font-size: 50px;
  }

}

/* ========================================= */
/* MOBILE */
/* ========================================= */

@media (max-width: 768px) {

  .project-hero-section {
    height: 420px;

    background-position: center;
  }

  .project-hero-overlay {
    align-items: flex-end;
  }

  .project-hero-content {
    padding: 0 24px 60px;
  }

  .project-hero-content h1 {
    font-size: 40px;

    line-height: 1.15;

    max-width: 100%;
  }

  .project-hero-line {
    width: 52px;
    height: 4px;

    margin-top: 18px;
  }

}

/* ========================================= */
/* SMALL MOBILE */
/* ========================================= */

@media (max-width: 480px) {

  .project-hero-section {
    height: 360px;
  }

  .project-hero-content {
    padding: 0 18px 45px;
  }

  .project-hero-content h1 {
    font-size: 32px;

    letter-spacing: -1px;
  }

  .project-hero-line {
    width: 46px;
  }

}